<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>所有人员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="../../static/css/font.css" th:href="@{/css/font.css}">
    <link rel="stylesheet" href="../../static/css/xadmin.css" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="../../static/css/all-member.css" th:href="@{/css/all-member.css}">
    <script type="text/javascript" src="../../static/lib/layui/layui.js" charset="utf-8"
        th:src="@{/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="../../static/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <style>
        /*.layui-layer-iframe{*/
        /*    z-index: 1000000;*/
        /*    top: 0;*/
        /*}*/
    </style>

</head>

<body>
    <div class="layui-fluid btn-nav">
        <div class="x-nav">
            <div class="layui-breadcrumb btn-collection">
                <button class="layui-btn layui-btn-xs layui-btn-normal" id="getSearchBox">
                    <i class="layui-icon">&#xe615;</i>查询
                </button>
                <!--<button class="layui-btn layui-btn-xs" onclick="xadmin.open('添加人员','./add-member.html',900,600)">-->
                <button class="layui-btn layui-btn-xs" data-type="add">
                    <!--<button class="layui-btn layui-btn-xs" id="add-member">    -->
                    <i class="layui-icon">&#xe61f;</i>添加
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-danger" data-type="delete">
                    <i class="layui-icon">&#xe640;</i>删除所选
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-warm">
                    <i class="layui-icon">&#xe62f;</i>上传
                </button>
            </div>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
    </div>
    <!--<div class="x-nav"></div>-->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12">

                <div class="layui-card">
                    <div class="layui-card-body ">
                        <div class="demoTable" style="display: none">
                            姓名：
                            <div class="layui-inline">
                                <input class="layui-input" name="keyword" id="demoReload1" autocomplete="off">
                            </div>
                            身份证:
                            <div class="layui-inline">
                                <input class="layui-input" name="keyword" id="demoReload2" autocomplete="off">
                            </div>
                            <button class="layui-btn" data-type="reload">查询</button>
                            <button class="layui-btn" data-type="clear">清空</button>
                        </div>
                        <table class="layui-hide" id="member-table" lay-filter="member"></table>
                        <script type="text/html" id="operation-bar">
                        <button class="layui-btn layui-btn-xs" lay-event="edit">
                            <i class="layui-icon">&#xe642;</i>编辑
                        </button>
                        <button class="layui-btn layui-btn-xs  layui-btn-warm" lay-event="detail">
                            <i class="layui-icon">&#xe62d;</i>查看
                        </button>
                        <!--<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>-->
                        <!--<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>-->
                        <!--<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>-->
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script th:inline="NONE">

    $.ajax({
        url: "https://restapi.amap.com/v3/config/district?key=e9b4199596ccf074d1480b0236a60b06",
        type: "GET",
        success: function (res) {
            console.log("结果", JSON.stringify(res));
            sessionStorage.setItem('province', JSON.stringify(res));
        }, error: function (res) {
            console.log("失败");
            console.log(res);
        }
    })
    var wth = $(document).width();
    var checkedMember = [];
    var table_data = [];
    var memberTable;

    layui.use(['table', 'form', 'element', 'layer'], function () {
        // var $ = layui.$;
        var layer = layui.layer;

        function showWindow(path, title) {
            layer.open({
                type: 2,
                content: path,
                title: title,
                area: ["900px", $(window).height() + 'px'],
                offset: '0px',
                success: function (layero, index) {
                    layer.iframeAuto(index);
                }, end: function () {
                    memberTable.reload();
                }
            })
        }

        var table = layui.table;

        // 显示/隐藏搜索框
        $("#getSearchBox").click(function () {
            if ($('.demoTable').css('display') == 'block') {
                $('.demoTable').css('display', 'none');
            } else {
                $('.demoTable').css('display', 'block');
            }
            // layer.msg("点击事件");
        });

        memberTable = table.render({
            elem: '#member-table'
            , url: '/v1/user/selectAllUserByPage'
            , cols: [[
                { checkbox: true }
                , { field: 'name', title: '姓名', sort: true }
                , { field: 'town', title: '乡镇', sort: true }
                , { field: 'gender', title: '性别' }
                , { field: 'idCardNum', title: '身份证', width: wth * 15 / 100 }
                , { field: 'educationalLevel', title: '文化程度', sort: true, width: wth * 10 / 100 }
                , { field: 'nation', title: '民族', width: wth * 10 / 100 }
                , { field: '', title: '操作', toolbar: "#operation-bar", width: wth * 20 / 100 }
            ]]
            , id: 'testReload'
            , page: true
            , height: 600
            , done: function (res, curr, count) {
                console.log(res);
                table_data = res.data;
            }
        });

        var active = {
            reload: function () {
                var demoReload1 = $('#demoReload1');
                var demoReload2 = $('#demoReload2');
                console.log(demoReload1.val());
                console.log(demoReload2.val());
                table.reload('testReload', {
                    url: "/v1/user/searchUserLike",
                    where: {
                        // keyword:{}
                        name: demoReload1.val(),
                        idCardNum: demoReload2.val()
                    }, page: {
                        curr: 1
                    }
                });
            },
            clear: function () {
                $('#demoReload1').val('');
                $('#demoReload2').val('');
            },
            add: function () {
                showWindow('./add-member.html', '添加人员');
            },
            delete: function () {
                deleteSelected();
            }
        };

        // 绑定事件
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //表格复选框选择
        table.on('checkbox(member)', function (obj) {
            console.log(obj);
            if (obj.checked == true) {
                if (obj.type === 'one') {
                    console.log(obj.data);
                    checkedMember.push(obj.data.id);
                } else {
                    for (var item of table_data) {
                        checkedMember.push(item.id);
                    }
                }
            } else {
                if (obj.type === 'one') {
                    for (var i = 0; i < checkedMember.length; i++) {
                        if (checkedMember[i] === obj.data.id) {
                            checkedMember.splice(i, 1);
                        }
                    }
                } else {
                    for (var i = 0; i < checkedMember.length; i++) {
                        for (var j = 0; j < table_data.length; j++) {
                            if (checkedMember[i] === table_data[j].id) {
                                checkedMember.splice(i, 1);
                            }
                        }
                    }
                }
            }
            // layer.msg(checkedMember);
            console.log(checkedMember);
        });

        //工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            var id = data.id;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
                showWindow('check-member.html' + "?id=" + id, '查看')
            } else if (obj.event === 'edit') {
                EditUv(data);
                // showWindow('check-member.html'+ "?id=" + id +"&needExtralApiInfo=true", '编辑人员',id,function(id,index){
                //     $.ajax({
                //         url:'/v1/user/selectUserById' + "?userId=" + id,
                //         type:'GET',
                //         success:function(res){
                //             console.log("该人员结果:",res);
                //             var iframe = window['layui-layer-iframe' + index];
                //             iframe.child(res);
                //         }
                //     })
                // });
                showWindow('update-member.html' + "?id=" + id + "&needExtralApiInfo=true", '编辑人员');
            }
        });

    });


    // 编辑人员
    function EditUv(data) {
        console.log(data);
    }

    // 删除所选
    function deleteSelected() {
        var data = checkedMember;
        console.log("删除的内容", data);
        var queryData = data.join(',');
        layer.confirm('确认要删除吗？' + JSON.stringify(data), function (index) {
            // $.get('/v1/user/deleteUser?userIdList=' + data, function (res) {
            //     memberTable.reload();
            //     layer.msg(res.msg);
            //     layer.close(index);
            // });
            $.ajax({
                url: '/v1/user/deleteUser?userIdList=' + queryData,
                type: 'GET',
                success: function (res) {
                    memberTable.reload();
                    layer.msg(res.msg);
                    layer.close(index);
                }, error: function (res) {
                    layer.msg(res.msg);
                }
            })
        })
    }


</script>

</html>